<template>
  <div class="auth-container">
    <div class="auth-card">
      <div class="auth-header">
        <h1 class="auth-title">智能合同管理系统</h1>
        <p class="auth-subtitle">AI驱动的合同管理解决方案</p>
      </div>
      
      <a-tabs v-model:activeKey="activeTab" centered class="auth-tabs">
        <a-tab-pane key="login" tab="登录">
          <a-form
            :model="loginForm"
            :rules="loginRules"
            @finish="handleLogin"
            layout="vertical"
            class="auth-form"
          >
            <a-form-item label="用户名/邮箱" name="username">
              <a-input 
                v-model:value="loginForm.username" 
                placeholder="请输入用户名或邮箱"
                size="large"
                :prefix="h(UserOutlined)"
              />
            </a-form-item>
            
            <a-form-item label="密码" name="password">
              <a-input-password 
                v-model:value="loginForm.password" 
                placeholder="请输入密码"
                size="large"
                :prefix="h(LockOutlined)"
              />
            </a-form-item>
            
            <a-form-item name="remember">
              <a-checkbox v-model:checked="loginForm.remember">记住我</a-checkbox>
            </a-form-item>
            
            <a-form-item>
              <a-button 
                type="primary" 
                html-type="submit" 
                size="large" 
                block
                :loading="loginLoading"
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        
        <a-tab-pane key="register" tab="注册">
          <a-form
            :model="registerForm"
            :rules="registerRules"
            @finish="handleRegister"
            layout="vertical"
            class="auth-form"
          >
            <a-form-item label="用户名" name="username">
              <a-input 
                v-model:value="registerForm.username" 
                placeholder="请输入用户名"
                size="large"
                :prefix="h(UserOutlined)"
              />
            </a-form-item>
            
            <a-form-item label="邮箱" name="email">
              <a-input 
                v-model:value="registerForm.email" 
                placeholder="请输入邮箱"
                size="large"
                :prefix="h(MailOutlined)"
              />
            </a-form-item>
            
            <a-form-item label="密码" name="password">
              <a-input-password 
                v-model:value="registerForm.password" 
                placeholder="请输入密码"
                size="large"
                :prefix="h(LockOutlined)"
              />
            </a-form-item>
            
            <a-form-item label="确认密码" name="confirmPassword">
              <a-input-password 
                v-model:value="registerForm.confirmPassword" 
                placeholder="请再次输入密码"
                size="large"
                :prefix="h(LockOutlined)"
              />
            </a-form-item>
            
            <a-form-item name="agreement">
              <a-checkbox v-model:checked="registerForm.agreement">
                我已阅读并同意<a href="#" class="auth-link">用户协议</a>和<a href="#" class="auth-link">隐私政策</a>
              </a-checkbox>
            </a-form-item>
            
            <a-form-item>
              <a-button 
                type="primary" 
                html-type="submit" 
                size="large" 
                block
                :loading="registerLoading"
              >
                注册
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'

const router = useRouter()
const userStore = useUserStore()
const activeTab = ref('login')
const loginLoading = ref(false)
const registerLoading = ref(false)

// 登录表单
const loginForm = reactive({
  username: '',
  password: '',
  remember: false
})

// 注册表单
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agreement: false
})

// 登录表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名或邮箱', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ]
}

// 注册表单验证规则
const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule: any, value: string) => {
        if (value !== registerForm.password) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ],
  agreement: [
    {
      validator: (rule: any, value: boolean) => {
        if (!value) {
          return Promise.reject('请阅读并同意用户协议和隐私政策')
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ]
}

// 处理登录
const handleLogin = async () => {
  try {
    loginLoading.value = true
    // 使用用户存储进行登录
    const result = await userStore.login({
      username: loginForm.username,
      password: loginForm.password
    })
    
    if (result.success) {
      message.success('登录成功')
      // 登录成功后跳转到首页
      router.push('/')
    } else {
      message.error(result.message || '登录失败')
    }
  } catch (error: any) {
    console.error('登录失败:', error)
    message.error('登录失败，请检查用户名和密码')
  } finally {
    loginLoading.value = false
  }
}

// 处理注册
const handleRegister = async () => {
  try {
    registerLoading.value = true
    // 使用用户存储进行注册
    const result = await userStore.register({
      username: registerForm.username,
      email: registerForm.email,
      password: registerForm.password
    })
    
    if (result.success) {
      message.success('注册成功')
      // 注册成功后切换到登录页
      activeTab.value = 'login'
    } else {
      message.error(result.message || '注册失败')
    }
  } catch (error: any) {
    console.error('注册失败:', error)
    message.error('注册失败，请稍后再试')
  } finally {
    registerLoading.value = false
  }
}
</script>

<style scoped>
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.auth-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255, 219, 98, 0.2) 0%, transparent 50%);
  z-index: 1;
}

.auth-card {
  width: 100%;
  max-width: 450px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  padding: 25px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-header {
  text-align: center;
  margin-bottom: 15px;
}

.auth-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 5px;
  background: linear-gradient(45deg, #302b63, #24243e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.auth-subtitle {
  color: #666;
  font-size: 12px;
}

.auth-tabs {
  margin-bottom: 0;
}

.auth-tabs :deep(.ant-tabs-tab) {
  font-weight: 500;
  font-size: 16px;
}

.auth-tabs :deep(.ant-tabs-ink-bar) {
  background: linear-gradient(90deg, #302b63, #24243e);
}

.auth-form {
  margin-top: 12px;
}

.auth-form :deep(.ant-form-item) {
  margin-bottom: 14px;
}

.auth-form :deep(.ant-form-item-label > label) {
  font-weight: 500;
  color: #333;
  font-size: 13px;
}

.auth-form :deep(.ant-input-affix-wrapper) {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s;
  padding: 6px 11px;
}

.auth-form :deep(.ant-input) {
  font-size: 14px;
  padding: 4px 11px;
}

.auth-form :deep(.ant-input-affix-wrapper:focus),
.auth-form :deep(.ant-input-affix-wrapper-focused) {
  border-color: #302b63;
  box-shadow: 0 0 0 2px rgba(48, 43, 99, 0.2);
}

.auth-form :deep(.ant-btn-primary) {
  background: linear-gradient(45deg, #302b63, #24243e);
  border: none;
  border-radius: 6px;
  height: 36px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s;
}

.auth-form :deep(.ant-btn-primary:hover) {
  background: linear-gradient(45deg, #24243e, #302b63);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(48, 43, 99, 0.3);
}

.auth-link {
  color: #302b63;
  text-decoration: none;
  font-weight: 500;
}

.auth-link:hover {
  text-decoration: underline;
}

@media (max-width: 576px) {
  .auth-card {
    padding: 30px 20px;
  }
  
  .auth-title {
    font-size: 24px;
  }
}
</style>